<template>
    <div>
        <div class="title">
            <span>头像</span>
            <div class="header-right">
                <div class="pos">
                    <img :src="avatar" class="header" id="header-img">
                    <input type="file" id="docpicker" accept="image/*" @change="upload">
                </div>
            </div>


            <img src="/images/youjiantou.png" class="right">
        </div>
        <div class="title">
            <span>昵称</span>
            <div class="header name">{{nickname}}</div>
            <img src="/images/youjiantou.png" class="right" @click="updatename">
        </div>
    </div>
</template>

<script>
    import {pageConfig} from '@/config';
    export default {
        name: 'login',
        data(){
            return {
                nickname: '',
                avatar: '/images/header.png'
            }
        },
        created: function () {
            if (!this.$user.is_login()) {
                this.$user.jumpLogin();
            } else {
                let userinfo = this.$user.getUinfo();
                this.nickname = userinfo.nickname;
                this.avatar = userinfo.avatar;
            }
        },
        methods: {
            updatename() {
                this.$router.push('/m/updatename') ;
            },
            upload(e){
                this.$http.$upload({
                    file: e.target.files[0]
                }).then((res)=>{
                    this.avatar = res.data.url;
                    this.submit();
                }).catch((e)=>{
                    console.log(e)
                })
            },
            submit() {
                this.$http.$ajax('profile', pageConfig.public, {
                    avatar: this.avatar,
                }, {loading: false, success:(res)=> {
                    this.$user.setavatar(this.avatar);
                }});
            }
        },
        computed: {

        }
    }
</script>
<style>
    .title{
        margin-left: 54px;
        position: relative;
        margin-top: 79px;
        display: flex;
        align-items: center;
    }
    .header-right{
        position: absolute;
        right: 0;
        margin-right: 82px;
    }
    .pos{
        position: relative;
    }
    #header-img{
        border-radius: 50%;
        width: 54px;
        height: 54px;

    }
    .title span{
        font-size: 26px;
    }
    .right{
        width: 14px;
        height: 22px;
        margin-right: 48px;
        position: absolute;
        right: 0;
    }
    #docpicker{
        position: absolute;
        left: 0;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        outline: none;
        filter: alpha(opacity=0);
        opacity: 0;
    }
    .name{
        position: absolute;
        right: 0;
        margin-right: 82px;
        text-align: right;
        direction: rtl;
        color: #b1b0b0;
        font-size: 20px;
    }
</style>


